<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>p2p网贷平台</title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link href="css/common.css" rel="stylesheet"/>
    <link href="css/register.css" rel="stylesheet" type="text/css">
    <script src="script/jquery.min.js" type="text/javascript"></script>
    <script src="script/common.js" type="text/javascript"></script>
    <script src="script/login.js" type="text/javascript"></script>
    <script th:src="@{/layui/layer/layer.js}" type="text/javascript"></script>
</head>
<body>
<div th:replace="common/public::head"></div>
<!--登录-->
<div class="wrap">
    <form action="/erb/" id="LonginForm" method="get" name="LonginForm" onsubmit="return login();">
        <div class="tdbModule loginPage">
            <div class="registerTitle">用户登录</div>
            <div class="registerCont">
                <ul>
                    <li class="error">
                        <font color="red" id="tips"></font>
                    </li>
                    <li>
                        <span class="dis">账号：</span>
                        <input autocomplete="off" autofocus class="input" id="phoneemail" maxlength="24" name="phoneemail" placeholder="请输入手机号/邮箱" tabindex="1"
                               type="text">
                    </li>

                    <li>
                        <span class="dis">密码：</span>
                        <input autocomplete="off" class="input" id="password" maxlength="24" name="password" tabindex="1" type="password">
                        <!--                        <a class="blue" href="#" id="pawHide">忘记密码</a>-->
                    </li>
                    <li>
                        <span class="dis">验证码：</span>
                        <input autocomplete="off" class="input" data-msg="验证码" id="verCode" maxlength="4" name="yzm" style="width:166px;" tabindex="1"
                               type="text">
                        <img alt="点击更换验证码" class="valign" id="img" onclick="changeImg();" style="cursor:pointer;" title="点击更换验证码">
                        <a class="blue" href="javascript:void(0);" onclick="changeImg();">看不清？换一张</a>
                        <font color="red" id="timg"></font>
                    </li>
                    <li class="btn">
                        <input class="radius1" id="submitBtn" type="submit" value="立即登录">
                    </li>
                </ul>
            </div>
        </div>
    </form>
</div>
<!--网站底部-->
<div class="ft" id="footer">
    <div th:replace="common/public::footer"></div>
</div>
<script type="text/javascript">
    function changeImg() {
        $("#img").attr("src", "/erb/user/image?date=" + new Date().getTime());
    }

    //初始化时调用一下
    changeImg();

    function login() {
        var phoneemail = $("#phoneemail").val().trim();
        var password = $("#password").val().trim();
        var code = $("#verCode").val().trim();
        var b = false;
        //实例防触层
        let zzz = layer.load();
        //使用ajax同步提交，因为使用异步时，还未执行完就被b返回false。
        $.ajax({
            url: "/erb/user/valid",
            type: "post",
            async: false,
            data: {code: code},
            dataType: "json",
            success: function (data) {
                if (data == 0) {
                    $.ajax({
                        url: "/erb/user/login_verification",
                        type: "post",
                        async: false,  //true为异步提交（默认），false为同步提交。
                        data: {phoneemail: phoneemail, password: password},
                        dataType: "json",
                        success: function (data) {
                            layer.close(zzz);  //关闭等待防触层
                            if (data == false) {
                                changeImg();
                                //显示内容
                                $("#tips").html("账号或密码错误！");
                                //设置3秒后清空内容！
                                setTimeout("$('#tips').html('')", 3000);
                            } else {
                                b = false;
                                layer.msg('登录成功！', {time: 1000, icon: 1}, function () {
                                    location.href = '[[@{/}]]';
                                });
                                // let i = layer.msg('登录成功！',{time: 1000},function () {
                                //     location.href = '[[@{/}]]';
                                // });
                                // layer.style(i, {
                                //     'background-color': 'lightgrey'
                                // });
                            }
                        }
                    });
                } else if (data == 1) {
                    layer.close(zzz);  //关闭等待防触层
                    //显示内容
                    $("#timg").html("验证码已失效！");
                    //设置3秒后清空内容！
                    setTimeout("$('#timg').html('')", 3000);
                } else if (data == 3) {
                    layer.close(zzz);  //关闭等待防触层
                    //显示内容
                    $("#timg").html("验证码已过期，请重新获取！");
                    //设置3秒后清空内容！
                    setTimeout("$('#timg').html('')", 3000);
                } else {
                    layer.close(zzz);  //关闭等待防触层
                    //显示内容
                    $("#timg").html("验证码错误！");
                    //设置3秒后清空内容！
                    setTimeout("$('#timg').html('')", 3000);
                }
            }
        });
        return b;
    }
</script>
</body>
</html>
